jsx----------> React.createElement
之前写 React 组件都必须有一行 import * as React from 'react'，因为编译后会用到 React 的 api。
但后来改为了这种 render function：
由 babel、tsc 等编译工具自动引入一个 react/jsx-runtime 的包，
import { jsx as _jsx } from "react/jsx-runtime";
const content= _jsx("div", { children: "guang" })

也就是这样的流程：
                 state、props
jsx ----------> render function ----------> vdom

然后 vdom 会转换为 fiber 结构，它是一个链表：

        state、props   (schedule空闲的时候、reconcile后面的fiber)
jsx -> render function -> vdom ------>fiber
                          (recondile,常说的diff算法在这个过程中)
vdom 只有 children 属性来链接父子节点，
但是转为 fiber 结构之后就有了 child、sibling、return 属性来关联父子、兄弟节点。

多个节点的 diff 也就是当老的 fiber 子节点列表需要更新的时候，
要和新的 vdom 的children 进行对比，找到哪些是可以复用的，
直接移动过去，剩下的节点做增删，产生新的 fiber 节点列表。

<!-- react 渲染流程整体分为两个大阶段：render 阶段和 commit 阶段。-->
1.render 阶段也就是 reconcile 的 vdom 转 fiber 的过程，
2.commit 阶段就是具体操作 dom，以及执行副作用函数（useEffect、生命周期等函数）的过程。
（commit 阶段还分为了 3 个小阶段：before mutation、mutation、layout。）
                        (具体操作 dom)
before mutation ---------> mutation ---------> layout 
                                   (能拿到 dom 的，ref 更新是在这个阶段、useLayoutEffect（同步逻辑会阻塞渲染）)